<template>
  <div class="app-container">
    <!-- 条件查询区域开始 -->
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-row>
          <!-- 是否默认 -->
          <el-col :span="6">
            <el-form-item
              :label="$t('smsAppConfig.isDefault')"
              prop="isDefault"
            >
              <jmash-select
                v-model="queryParams.isDefault"
                :data="Dict.isDefaultDict.values"
                :placeholder="$t('smsAppConfig.isDefaultRead')"
                @keyup.enter="tableHooks.handleQuery()"
                class="!w-[203px]"
                clearable
              />
            </el-form-item>
          </el-col>
          <!-- 服务产商 -->
          <el-col :span="6">
            <el-form-item :label="$t('smsAppConfig.provider')" prop="provider">
              <jmash-select
                v-model="queryParams.provider"
                :placeholder="$t('smsAppConfig.providerRead')"
                :data="Dict.providerDict.values"
                clearable
              />
            </el-form-item>
          </el-col>
          <!-- 消息类型 -->
          <el-col :span="6">
            <el-form-item
              :label="$t('smsAppConfig.configType')"
              prop="configType"
            >
              <jmash-select
                v-model="queryParams.configType"
                :data="Dict.configTypeDict.values"
                :placeholder="$t('smsAppConfig.configTypeRead')"
                @keyup.enter="tableHooks.handleQuery()"
                class="!w-[203px]"
                clearable
              />
            </el-form-item>
          </el-col>
          <!-- 重置/查询 -->
          <el-col :span="6">
            <el-form-item class="search-btn">
              <el-button type="primary" @click="tableHooks.handleQuery()">
                {{ $t("common.search") }}
              </el-button>
              <el-button @click="tableHooks.resetQuery()">{{
                $t("common.reset")
              }}</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="clear"></div>
    </div>
    <!-- 条件查询区域结束 -->

    <el-card shadow="never" class="table-container">
      <!-- 按钮开始 -->
      <template #header>
        <!-- 按钮开始 -->
        <el-row>
          <el-col :span="17">
            <!-- 新增 -->
            <el-button
              type="primary"
              v-hasPerm="['sms:sms_app_config:add']"
              @click="handleAdd"
            >
              {{ $t("common.add") }}
            </el-button>
            <!-- 批量删除 -->
            <el-button
              type="primary"
              v-hasPerm="['sms:sms_app_config:delete']"
              @click="tableHooks.deleteRecords()"
            >
              {{ $t("common.batchDelete") }}
            </el-button>
          </el-col>
          <el-col :span="7" class="container-float">
            <jmash-column-select
              v-model="tableLabel"
              label-name="sms/sms-app-config"
            />
          </el-col>
        </el-row>
      </template>
      <!-- 按钮结束 -->

      <!-- 表格开始 -->
      <jmash-table
        ref="multipleTableRef"
        row-key="configCode"
        :list-loading="listLoading"
        :data="tableData"
        :table-label="tableLabel"
        @selection-change="tableSelected"
        @sort-change="handleSort"
      >
        <!-- 消息类型 -->
        <template #configType="scope">
          <span>
            {{ Dict.configTypeDict.getEnumValue(scope.data.row.configType) }}
          </span>
        </template>
        <!-- 服务厂商 -->
        <template #provider="scope">
          <span>
            {{ Dict.providerDict.getEnumValue(scope.data.row.provider) }}
          </span>
        </template>
        <!-- 是否默认 -->
        <template #isDefault="scope">
          <span>
            {{ Dict.isDefaultDict.getValue(scope.data.row.isDefault) }}
          </span>
        </template>
        <!-- 排序 -->
        <template #listOrder="scope">
          <el-icon
            size="16"
            @click="tableHooks.handleMove(scope.data.row, false)"
          >
            <Bottom />
          </el-icon>
          <el-icon
            size="16"
            @click="tableHooks.handleMove(scope.data.row, true)"
          >
            <Top />
          </el-icon>
        </template>
        <!-- 是否启用 -->
        <template #enable="scope">
          <el-switch
            v-model="scope.data.row.enable"
            @change="
              tableHooks.enableRecord(scope.data.row, scope.data.row.enable)
            "
          />
        </template>
        <template #operation="scope">
          <span
            class="el-button-color"
            v-hasPerm="['sms:sms_app_config:update']"
            @click="handleEdit(scope.data.row)"
          >
            {{ $t("common.edit") }}
          </span>
          <span
            class="el-button-color dropdown-left"
            v-hasPerm="['sms:sms_app_config:delete']"
            @click="tableHooks.deleteRecord(scope.data.row)"
          >
            {{ $t("common.delete") }}
          </span>
          <span
            v-if="scope.data.row.configType === 'EMAIL'"
            class="el-button-color dropdown-left"
            @click="handleSending(scope.data.row)"
          >
            {{ $t("smsTemplate.sending") }}
          </span>
        </template>
      </jmash-table>
      <template #footer>
        <jmash-pagination
          v-if="total > 0"
          v-model:total="total"
          v-model:current-page="queryParams.curPage"
          v-model:page-size="queryParams.pageSize"
          @pagination="tableHooks.getList()"
        />
      </template>
    </el-card>
    <!-- 表格结束 -->
    <edit
      v-if="editDialog.visible"
      v-model="editDialog.visible"
      :title="editDialog.title"
      :entity-key="entityKey"
      @refresh="refresh"
      width="900px"
    />
  </div>
</template>
<script setup lang="ts">
import { type Ref, ref, reactive } from "vue";
import {
  type TableColumn,
  type TableSort,
  type DialogRef,
  useTableHooks,
} from "jmash-core";
import edit from "./edit.vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
import { useRouter } from "vue-router";
const router = useRouter();
import type {
  SmsAppConfigReq,
  SmsAppConfigModel,
  SmsAppConfigKey,
} from "@/api/sms/sms-app-config/types";
import { smsAppConfigApi } from "@/api/sms/sms-app-config/index";

import { Dict } from "@/api/sms";
const queryParams = ref<SmsAppConfigReq>({});
Dict.configCodeDict.useValues();
const {
  tableHooks,
  multipleTableRef,
  queryFormRef,
  listLoading,
  tableData,
  total,
} = useTableHooks(t, smsAppConfigApi, queryParams);

let tableLabel: Ref<TableColumn[]> = ref([
  {
    label: "smsAppConfig.configCode",
    prop: "configCode",
    width: "150",
    sortable: "custom",
    isColumn: true,
  },
  {
    label: "smsAppConfig.configName",
    prop: "configName",
    width: "220",
    sortable: "custom",
    isColumn: true,
  },
  {
    label: "smsAppConfig.configType",
    prop: "configType",
    slotName: "configType",
    columnType: "slot",
    width: "150",
    sortable: "custom",
    isColumn: true,
  },
  {
    label: "smsAppConfig.provider",
    prop: "provider",
    slotName: "provider",
    columnType: "slot",
    width: "150",
    sortable: "custom",
    isColumn: true,
  },
  {
    label: "smsAppConfig.isDefault",
    prop: "isDefault",
    slotName: "isDefault",
    columnType: "slot",
    width: "150",
    sortable: "custom",
    isColumn: true,
  },
  {
    label: "smsAppConfig.accessKeyId",
    prop: "accessKeyId",
    sortable: "custom",
    isColumn: true,
  },
  {
    label: "common.operate",
    sortable: "custom",
    slotName: "operation",
    columnType: "slot",
    width: "150",
    fixed: "right",
    isColumn: true,
  },
]);

//编辑Dialog
const editDialog = ref({
  title: t("common.edit"),
  visible: false,
} as DialogRef);

let entityKey = reactive<SmsAppConfigKey>({});

// 新增
function handleAdd() {
  entityKey = reactive<SmsAppConfigKey>({});
  editDialog.value.title = t("common.add");
  editDialog.value.visible = true;
}

// 编辑
function handleEdit(row: SmsAppConfigModel) {
  entityKey.configCode = row.configCode;
  editDialog.value.title = t("common.edit");
  editDialog.value.visible = true;
}

//行选择
function tableSelected(value: SmsAppConfigModel[]) {
  tableHooks.selectionRows.value = value;
}

//处理排序
function handleSort(sort: TableSort) {
  tableHooks.handleSort(sort.prop, sort.order);
}

/**
 * 从子组件传过来的事件，刷新列表
 *
 * @returns {void}
 */
function refresh(value: boolean) {
  if (value) {
    tableHooks.getList();
  }
}

//查询数据.

tableHooks.getList();

//发送邮件
function handleSending(row: SmsAppConfigModel) {
  router.push({
    path: "/sms/sms-app-config/emailSending",
    query: {
      entityKey: row.configCode,
      configCode: row.configCode,
    },
  });
}
</script>
